<template>
	<!-- 用户商品收藏页面 -->
	<view class="collect_container">
		<view class="goods_list">
			<view class="goods_item" 
				v-for="(item, index) of goodsD" 
				:key="index"
				:class="{'notFirstIitem': index != 0}"
				@click="gotoGoodsDetail(item)"
				>
				<view class="goods_item_pic">
					<image 
						:src="baseUrl + item.cover" 
						mode="widthFix"
						class="goods_item_pic_img"
						>
					</image>
				</view>
				<view class="goods_item_info">
					<view class="goods_item_info_name">
						{{ item.goodsName }}
					</view>
					<view class="goods_item_info_price">
						￥<span style="font-size: 19px;">{{ item.price }}</span>
					</view> 
					<view class="goods_item_info_inventory">
						库存：{{ item.inventory }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";

// 图片基础路径
let baseUrl = uni.$baseUrl
// 商品数据
let goodsD = ref([]);

onMounted(()=>{
	getGoodsD();
})

// 获取商品数据
async function getGoodsD(){
	// 获取登录用户信息
	let userInfo = JSON.parse(uni.getStorageSync("userInfo"));
	
	const res = await uni.$http.get(`/userInfos/getGoodsStartByUserId/${userInfo.userId}`);
	goodsD.value = res.data.data;
}

// 跳转商品详情页面
function gotoGoodsDetail(item){
	uni.setStorageSync("goodsDetail", JSON.stringify(item));
	uni.navigateTo({
		url:"/subPkg1/goods_detail/goods_detail"
	})
}

</script>

<style lang="scss" scoped>
.goods_item{
	box-sizing: border-box;
	display: flex;
	background-color: #fff;
	padding: 20px;
	width: 95vw;
	// border: solid red 1px;
	margin: 0 auto;
	border-radius: 15rpx;
}

.goods_item_pic{
	width: 25%;
}

.goods_item_info{
	width: 75%;
}

.goods_item_pic_img{
	width: 85%;
}

.goods_item_info_name{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.goods_item_info_price{
	margin-top: 15rpx;
	color: red;
}

.goods_item_info_inventory{
	font-size: 14px;
	margin-top: 10rpx;
	color: #4c4c4c;
}

.notFirstIitem{
	margin-top: 20rpx;
}

</style>
